<style scoped>
</style>
<template>
    <div :id="id" :style="{width: '100%', height: height+'px'}"></div>
</template>
<script>
import echarts from "echarts";
import {adaptePX} from "@/lib/common";
export default {
  name: "RoseCircle",
  props: {
    id:{
      type: String,
      default:'MyRoseCircle'
    },
    data: Object,
    height: Number,
    fontSize:{
      type: Number,
      default: 20
    }
  },
  watch:{
    data:{
      handler: function (val) {
        this.data = val;
        this.init();
      },
      deep: true
    }
  },
  methods: {
    init() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById(this.id));
      var data = [];
      this.data.xDatas.map((item,i)=>{
        data.push({
          name: item,
          value: this.data.yDatas[i]
        })
      })
      var fontSize = adaptePX(this.fontSize);
      var option = {
        color: this.data.colors || ['#37a2da','#32c5e9','#9fe6b8','#ffdb5c','#ff9f7f','#fb7293','#e7bcf3','#8378ea'],
        tooltip : {
            // trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
 			    	// type:'scroll',
			    	show: true,
			        textStyle: {
                "color": "#fff",
                "fontSize": fontSize
			        },
			        orient: 'vertical',
			        left: (this.data.legend?this.data.legend.left:'')||'60%',
			        top: 'middle',
              width: '40%',
              itemWidth:24,
              itemHeight:13,
              itemGap:15,
			        data: this.data.xDatas,
			        formatter: (name)=> {
                var val=0;
                var index = this.data.xDatas.indexOf(name);
                val = this.data.yDatas[index];
                if(this.data.legend && this.data.legend.hasOwnProperty('showValue')){
                  if(this.data.legend.showValue){
                    return "{title|" + name + "} {value|" + (val) +"%} "
                  }else{
                    return "{title|" + name + "}"
                  }
                }
			        	
			        },
			        textStyle: {
			            rich: {
			                title: {
			                    fontSize:fontSize,
			                    color: '#fff'
			                },
			                value: {
			                    fontSize:fontSize,
			                    color: '#0DF6FF'
			                }
			            }
			        },
			    },
        calculable : true,
        series : [
          {
            name:'',
            type:'pie',
            radius : this.data.radius||['30%', '70%'],
            center:['30%','50%'],
            roseType : 'area',
            label:{
                show:false
            },
            data: data
          }
        ]
      }
      // 绘制图表
      myChart.setOption(option);
    }
  },
  mounted() {
    this.init();
  }
};
</script>
